<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <h4>教育宝网课平台介绍</h4>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <img src="../assets/images/test01.png" class="ig1">
                </el-aside>
                <el-main>
                    <div class="w1">
                        <p>教育宝网课平台，致力于链接求知若渴的学员和制作精良的课程方。对于学员，</p>
                        <p>平台解决“ 有需求但好课难寻” 的问题。对于课程方，平台解决“有好课但缺乏</p>
                        <p>传播渠道” 的问题。平台短期目标是：“ 筛选千家机构、上架万门网课” 。</p>
                        <br />
                        <p>教育宝为网课机构提供“ 免费店铺+推广分销+按效果分账”服务。</p>
                        <br />
                        <el-link type="primary">点击访问&nbsp;></el-link>
                        <br />
                        <br />
                        <dl>
                            <dt>课程细分品类</dt>
                            <dd>
                                <el-icon :size="20" style="font-weight: 400;">
                                    <Check />
                                </el-icon>
                                <span>职场通用</span>
                            </dd>
                            <dd>
                                <el-icon :size="20" style="font-weight: 400;">
                                    <Check />
                                </el-icon>
                                <span>就业技能</span>
                            </dd>
                            <dd>
                                <el-icon :size="20" style="font-weight: 400;">
                                    <Check />
                                </el-icon>
                                <span>生活兴趣</span>
                            </dd>
                            <dd>
                                <el-icon :size="20" style="font-weight: 400;">
                                    <Check />
                                </el-icon>
                                <span>少儿好课</span>
                            </dd>
                            <dd>
                                <el-icon :size="20" style="font-weight: 400;">
                                    <Check />
                                </el-icon>
                                <span>亲子教育</span>
                            </dd>
                            <dd>
                                <el-icon :size="20" style="font-weight: 400;">
                                    <Check />
                                </el-icon>
                                <span>语言留学</span>
                            </dd>
                            <dd>
                                <el-icon :size="20" style="font-weight: 400;">
                                    <Check />
                                </el-icon>
                                <span>考试考证</span>
                            </dd>
                            <dd>
                                <el-icon :size="20" style="font-weight: 400;">
                                    <Check />
                                </el-icon>
                                <span>更多好课</span>
                            </dd>
                        </dl>

                    </div>
                </el-main>
            </el-container>
        </el-container>
        <el-container style="background-color: #FAFBFC;">
            <el-header>
                <h4>入驻理由</h4>
                <p style="line-height: 50px; 
                          color: #308AFE;
                          font-weight: bold;
                          font-size: 18px;">免费店铺+推广分销+按效果分账</p>
            </el-header>
            <el-container>
                <el-main class="main01">
                    <div style="margin-left: 230px;">
                        <el-row :gutter="30">
                            <el-col :span="4" v-for="(feature, index) in features" :key="index">
                                <div class="grid-content">
                                    <div class="feature-icon">
                                        <component :is="feature.icon" :size="20" />
                                    </div>
                                    <h3 style="font-weight: 540;">{{ feature.title }}</h3>
                                    <p>{{ feature.description }}</p>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="b1">
                        <el-button type="primary">申请入驻</el-button>
                    </div>
                </el-main>
            </el-container>
        </el-container>
        <el-container>
            <el-header>
                <h4>助力知识变现</h4>
            </el-header>
            <el-container>
                <el-aside width="200px" :v-if="(url, index) in pictures">
                    <img src="../assets/images/img01.png" class="ig1">
                </el-aside>
                <el-main>
                    <div class="w2">
                        <ul>
                            <li>免费拥有移动端、PC端、APP知识店铺</li>
                            <li>支持音/视频独立或组合售卖变现</li>
                            <li>多种营销玩法快速实现裂变获客</li>
                        </ul>
                    </div>
                </el-main>
            </el-container>
        </el-container>
        <el-container>
            <el-header>
                <h4>功能强大的店铺管理后台</h4>
            </el-header>
            <el-container>
                <el-aside width="200px" :v-if="(url, index) in pictures">
                    <div class="w2" style="margin-left: 200px;">
                        <ul>
                            <li>支持多格式音视频批量上传</li>
                            <li>订单管理与交易分析</li>
                            <li>每月自动分账结算</li>
                        </ul>
                    </div>
                </el-aside>
                <el-main>
                    <img src="../assets/images/himg01.png" class="ig2" style="margin-left: 50px;">
                </el-main>
                <!-- <div class="b2">
                    <el-button type="primary">申请入驻</el-button>
                </div> -->
            </el-container>
        </el-container>
        <el-container>
            <el-header>
                <h4>众多网课机构的共同选择</h4>
            </el-header>
            <el-container>
                <el-main class="main03">
                    <ul>
                        <li>
                            <img src="../assets/images/icon/icon01.png" class="ig3">
                            <p>干货帮</p>
                        </li>
                        <li>
                            <img src="../assets/images/icon/icon02.png" class="ig3">
                            <p>次元橙课堂</p>
                        </li>
                        <li>
                            <img src="../assets/images/icon/icon03.png" class="ig3">
                            <p>小鹿微课</p>
                        </li>
                        <li>
                            <img src="../assets/images/icon/icon04.png" class="ig3">
                            <p>解忧馆</p>
                        </li>
                        <li>
                            <img src="../assets/images/icon/icon05.png" class="ig3">
                            <p>每识每课</p>
                        </li>
                        <li>
                            <img src="../assets/images/icon/icon06.png" class="ig3">
                            <p>玩疯了</p>
                        </li>
                        <li>
                            <img src="../assets/images/icon/icon07.png" class="ig3">
                            <p>吴明老师</p>
                        </li>
                        <!-- 第二排 -->
                        <li>
                            <img src="../assets/images/icon/icon08.png" class="ig3">
                            <p>时光说</p>
                        </li>
                        <li>
                            <img src="../assets/images/icon/icon09.png" class="ig3">
                            <p>羊爸爸</p>
                        </li>
                        <li>
                            <img src="../assets/images/icon/icon10.png" class="ig3">
                            <p>点点课堂</p>
                        </li>
                        <li>
                            <img src="../assets/images/icon/icon11.png" class="ig3">
                            <p>龙本鲁班</p>
                        </li>
                        <li>
                            <img src="../assets/images/icon/icon12.png" class="ig3">
                            <p>优长</p>
                        </li>
                        <li>
                            <img src="../assets/images/icon/icon13.png" class="ig3">
                            <p>懂我星球</p>
                        </li>
                        <li>
                            <img src="../assets/images/icon/icon14.png" class="ig3">
                            <p>每日瑜伽</p>
                        </li>
                    </ul>
                </el-main>
            </el-container>
        </el-container>
        <el-container>
            <el-header>
                <h4>入驻流程</h4>
            </el-header>
            <el-container>
                <el-main class="main04">
                    <el-steps style="max-width: 1200px" :active="4" align-center>
                        <el-step title="申请入驻">
                            <template #description>
                                <div>在线填写贵机构的<br />基本信息</div>
                            </template>
                        </el-step>
                        <el-step title="交流洽谈">
                            <template #description>
                                <div>专属商务经理与您<br />交流合作细节</div>
                            </template>
                        </el-step>
                        <el-step title="审核签约">
                            <template #description>
                                <div>双方审核后，签约<br />并提交相关资料</div>
                            </template>
                        </el-step>
                        <el-step title="上线招生">
                            <template #description>
                                <div>开通后台系统，上传<br />课程，在线授课</div>
                            </template>
                        </el-step>
                    </el-steps>
                </el-main>
            </el-container>
        </el-container>
        <el-container style="background-color: #308AFE;">
            <el-header>
                <h4 style="color: white;">享受“免费店铺+推广分销+按效果分销”的一揽子服务</h4>
            </el-header>
            <el-container>
                <el-main class="main05">
                    <div class="b2">
                        <el-button>申请入驻</el-button>
                    </div>
                </el-main>
            </el-container>
        </el-container>
        <el-container style="background-color: #212529; text-align: center;">
            <el-header class="h1">
                <ul>
                    <li>
                        <a href="">关于教育宝</a>
                        <span>&nbsp;|&nbsp;</span>
                    </li>
                    <li>
                        <a href="">联系方式</a>
                        <span>&nbsp;|&nbsp;</span>
                    </li>
                    <li>
                        <a href="">网站地图</a>
                        <span>&nbsp;|&nbsp;</span>
                    </li>
                    <li>
                        <a href="">品牌合作</a>
                        <span>&nbsp;|&nbsp;</span>
                    </li>
                    <li>
                        <a href="">机构注册</a>
                        <span>&nbsp;|&nbsp;</span>
                    </li>
                    <li>
                        <a href="">机构注册</a>
                        <span>&nbsp;|&nbsp;</span>
                    </li>
                    <li>
                        <a href="">法律声明</a>
                        <span>&nbsp;|&nbsp;</span>
                    </li>
                    <li>
                        <a href="">隐私条款</a>
                    </li>
                </ul>
            </el-header>
            <el-container style="font-size: 12px;">
                <el-main class="main05">
                   <p>增值电信业务经营许可证： 鲁 B2-20100091网站备案号：鲁ICP备09073072号-7 鲁公网安备 37010202002182号 营业执照：913701026974797002</p>
                   <p>Copyright © 2010 -2025教育宝Jiaoyubao.cn 版权所有</p>
                   <p><a href="">找老板吐槽</a></p>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import {
    Discount,
    User,
    ReadingLamp,
    Service,
    CircleCheck,
    Picture
} from '@element-plus/icons-vue'

const features = [
    {
        icon: 'Discount',
        title: '品牌推广营销',
        description: '在教育宝平台多元化展示品牌及课程'
    },
    {
        icon: 'User',
        title: '全程运营服务',
        description: '从店铺搭建到授课，运营人员全程辅助'
    },
    {
        icon: 'ReadingLamp',
        title: '多个场景授课',
        description: '支持学员在H5、PC、APP多个场景进行购课学习'
    },
    {
        icon: 'Service',
        title: '协同售后服务',
        description: '协助机构共同对学员进行售后服务'
    },
    {
        icon: 'CircleCheck',
        title: '保障课程安全',
        description: '自行上传课程，保障课程安全'
    }
]

const pictures = [
    {
        url: '../assets/images/img01.png'
    },
    {
        url: '../assets/images/img02.png'
    },
    {
        url: '../assets/images/img03.png'
    }
]
</script>

<style scoped>
.common-layout {
    height: 100vh;
    width: 100vw;
}

.el-header {
    height: 100px;
    width: 100%;
    text-align: center;
    line-height: 100px;
    /* background-color: #b3c0d1; */
}

.el-header h4 {
    font-family: '微软雅黑';
    font-size: 26px;
    font-weight: bold;
}

.el-aside {
    height: 500px;
    width: 50vw;
    /* background-color: #d3dce6; */
}

/* .el-main {
    height: 500px;
    font-family: '微软雅黑';
    background-color: #e9eef3;
} */

.el-main p {
    line-height: 30px;
}

.ig1 {
    height: 430px;
    width: 572px;
    margin: 30px 0;
    margin-left: 250px;
}

.ig2 {
    height: 390px;
    width: 572px;
    margin: 30px 0;
    /* margin-left: 250px; */
}

.ig3 {
    height: 140px;
    width: 140px;
}

.w1 {
    margin-top: 70px;
    margin-left: 50px;
}

.w2 ul {
    height: 252px;
    width: 570px;
    list-style-type: none;
    /* border: 1px solid red; */
    margin-top: 100px;
    margin-left: 40px;
}

.w2 ul li {
    height: 76px;
    width: 570px;
    /* border: 1px solid blue; */
    background-color: #F5F6F7;
    margin-bottom: 11px;
    padding-left: 30px;
    line-height: 76px;
    font-size: 18px;
}

.w2 ul li:hover {
    background: linear-gradient(to right, #3A91FE, #D4E7FF);
    color: white;
}

.el-link {
    margin-right: 8px;
    font-size: 16px;
}

dl dt {
    /* border: 1px solid red; */
    height: 25px;
    width: 100px;
    color: white;
    background-color: #3A91FE;
    line-height: 25px;
    text-align: center;
    font-size: 14px;
}

dl dd {
    border: 1px solid #EBEBEB;
    height: 50px;
    width: 150px;
    float: left;
    line-height: 50px;
    text-align: center;
}

dl dd .el-icon {
    color: #3A91FE;
    vertical-align: middle;
    margin-right: 5px;
}

dl dd span {
    vertical-align: middle;
}

/* 确保容器有足够空间 */
.main01 {
    padding: 20px;
    min-height: 300px;
}

.main03 ul {
    list-style-type: none;
    /* height: 500px; */
    text-align: center;
    padding-left: 180px;
}

.main03 ul li {
    height: 200px;
    width: 180px;
    float: left;
    /* margin-left: 10px; */
    text-align: center;
}

/* 网格内容样式 */
.grid-content {
    padding: 10px;
    height: 300px;
    width: 220px;
    /* border: 1px solid red; */
    margin-top: 50px;
    text-align: center;
    background-color: white;
}

.grid-content h3 {
    margin-bottom: 10px;
}

.grid-content p {
    font-size: 14px;
    line-height: 20px;
}

.feature-icon {
    margin: 57px;
    color: #308AFE;
}

.feature-icon svg {
    width: 60px;
    height: 60px;
}

.grid-content:hover {
    background-color: #308AFE;
    color: white;
}

.grid-content:hover .feature-icon {
    color: white;
}

.b1 {
    justify-content: center;
    text-align: center;
    line-height: 100px;
}

.b1 button {
    height: 48px;
    width: 180px;
    font-size: 16px;
}

.b2 {
    justify-content: center;
    text-align: center;
}

.b2 button {
    height: 48px;
    width: 180px;
    font-size: 16px;
    color: #308AFE;
}

.el-steps {
    margin-left: 210px;
    margin-bottom: 50px;
}

:deep(.el-step__line) {
    margin-left: 70px;
    margin-top: 15px;
    width: 160px;
}

:deep(.el-step__icon) {
    height: 50px;
    width: 50px;
    font-size: 20px;
}

:deep(.el-step__title) {
    font-weight: bold;
    font-size: 18px;
    color: black;
    margin-top: 20px;
}

:deep(.el-step__description) {
    font-size: 14px;
    color: #ABABAB;
    margin-top: 5px;
    /* white-space: pre; */
}

.h1 {
    text-align: center;
    height: 40px;
}

.h1 ul {
    list-style-type: none;
    margin-top: 25px;
    margin-left: 560px;
}

.h1 ul li {
    float: left;
    line-height: 40px;
    font-size: 12px;
}

.h1 ul li a {
    color: #8B8C8C;
}

.h1 ul li span {
    color: #8B8C8C;
}

.main05 p{
    color: #8B8C8C;
}

.main05 p a{
    color: #8B8C8C;
}
</style>